<template>
  <div>
    <!-- 1.在子组件中使用slot 占位 -->
    <!-- 2.在父组件中,使用组件时,开团标签中间的地方,传入自定义的标签结构 -->
    <MyDialog>
      <!-- 这里直接写内容表示使用默认插槽, 而此时已经没有默认插槽了,所有的插槽都有 name 了 -->
      <!-- 如果子组件中的插槽都有名字,则需要使用template 来指定名字 -->
      <!-- 2. 使用template 包裹传递的标签,然后指定插槽的名字 -->
      <!-- 插槽大大提高了组件的灵活性 -->
      <!-- <template #header>
        
      </template> -->
      <template v-slot:content>
       <h2>温馨提示</h2>
         <img style="width: 200px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7d%2F88%2F47%2F7d884750af39930aa10117f63f24001c.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670039296&t=b02c18506b9cf26fa059b1bfbc9c1c5f" alt="">
      <h4>芜湖起飞</h4>
      </template>
       <!-- <template #footer="obj" >
      <button > {{ obj.yes }} </button>
      <button > {{ obj.no }} </button>
      </template> -->
      <template #footer="{ yes, no }" >
      <button > {{ yes }} </button>
      <button > {{ no }} </button>
      </template>
      <!-- 作用域插槽传递过来的变量,只能在当前template 中使用,所以才叫作用域插槽 -->
      <!-- {{obj.yse}} -->
    </MyDialog>
    <MyDialog>
      <h3>我是帅逼</h3>
    </MyDialog>

    <MyDialog >
      <template #content>
      <h1>强者就是要羞辱弱者</h1>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  components:{
    MyDialog
  },
  data() {
    return {
      
    };
  },


};
</script>

<style lang="scss" scoped>

</style>